<template>
	<div>
		<Breadcrumb>
			<BreadcrumbItem>操作员管理</BreadcrumbItem>
			<BreadcrumbItem>操作员列表</BreadcrumbItem>
		</Breadcrumb>
		<Form :model="request" inline>
			<FormItem>
				<Input type="text" v-model="request.username" clearable placeholder="请输入操作员" />
			</FormItem>
			<FormItem>
				<Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>
				<Button type="primary" @click="$router.push('/manager/add')" style="margin-right: 10px">添加</Button>
				<!-- <Button type="primary" @click="$router.go(-1)" style="margin-right: 10px">返回</Button> -->
			</FormItem>
		</Form>

		<div class="form_box">
			<Table :columns="columns" :data="tableData">
				<template slot-scope="{ row }" slot="device_group">

					<div v-for="(item,index) in row.device_group">{{item.group_name}}</div>

				</template>
				<template slot-scope="{ row }" slot="option">
					<Button type="success" size="small" style="margin-right: 5px" @click="edit(row)">编辑</Button>
					<Button type="error" size="small" style="margin-right: 5px" @click="remove(row)">删除</Button>
				</template>
			</Table>
		</div>
		
		<div style="display: flex;justify-content: center;margin-top: 24px;">
			<Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer
				show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
		</div>


		<Modal v-model="modal1" title="编辑操作员" @on-ok="confirm" @on-cancel="cancel" :mask-closable="false">
			<Form :label-width="110">
				<FormItem label="操作员:">
					<Input v-model="form.username" placeholder="请输入操作员"></Input>
				</FormItem>
				<FormItem label="机器组:" >
					<CheckboxGroup v-model="form.group_id">
						<Checkbox :label="item.id" v-for="(item,index) in groupList" :key="index">{{item.name}}</Checkbox>
					</CheckboxGroup>
				</FormItem>

			</Form>
		</Modal>


	</div>
</template>

<script>
	export default {
		data() {
			return {
				request: {
					page: 1
				},
				page: {},
				modal1: false,
				modal2: false,
				device_group: [],
				form: {
					id: null,
					username: '',
					group_id: []
				},
				type: 1, //1admin 2manager 3operator
				columns: [{
						title: '操作员',
						key: 'username',

					},
					{
						title: '机器组',
						slot: 'device_group',
					},
					{
						title: "操作",
						slot: "option",
						minWidth: 200,
						align: "center",

					}
				],
				tableData: [],
				groupList:[]
			}
		},
		created() {
			if (this.$route.query.name) {
				this.request.username = this.$route.query.name
			}
			if (this.$route.query.type) {
				this.type = this.$route.query.type
			}
			this.lists();
			// this.getGroup();
		},
		methods: {
			search() {
				this.request.page = 1;
				this.lists();
			},
			handleSizeChange(val) {
				this.request.page = 1;
				this.request.pagerows = val;
				this.lists();
			},
			handleCurrentChange(val) {
				this.request.page = val;
				this.lists();
			},
			lists() {
				this.loading = true;
				this.axios.post("manager/operatorList", this.request).then(res => {
					if (res.code == 1) {
						this.loading = false;
						this.tableData = res.data.list;
						this.page.count = res.data.count; // 总条数
						this.page.curPage = res.data.curPage; // 当前页
						this.page.countPage = res.data.countPage; // 总页数
					}
				});

			},

			confirm() {
				this.axios.post("manager/operatorEdid", this.form).then(res => {
					if (res.code == 1) {
						this.modal1 = false
						this.$Message.success("操作成功");
						this.lists()
					}
				});

			},
			cancel() {
				this.device_group = [],
					this.form = {
						id: null,
						username: '',
						group_id: []
					}
			},
			edit(row) {
				// this.device_group =row.device_group || [];
				console.log(row)
				var device_group = row.device_group || [];
				var arr = [];
				for(var i = 0,len= device_group.length;i<len;i++){
					arr.push(device_group[i].devicegroup_id)
				}
				this.form=  {
					id: row.id,
					username: row.username,
					group_id: arr
				}
				
				this.axios.get("manager/operatorEdid?id="+row.id).then(res => {
					if (res.code == 1) {
						this.groupList = res.data.group;
						this.modal1 = true;
					}
				});
				

				
			},
			
			getGroup(){
				this.axios.post("device/operatorGroup").then(res => {
					if (res.code == 1) {
						this.groupList = res.data;
					}
				});
			},
			
			remove(row) {
				this.$Modal.confirm({
					title: "确定要删除该操作员吗？",
					onOk: () => {
						this.axios.post("device/delOperator", {id:row.id}).then(res => {
							if (res.code == 1) {
								this.modal1 = false
								this.$Message.success("操作成功");
								this.lists()
							}
						});

					},
					onCancel: () => {}
				});
			},
		}
	}
</script>

<style>
</style>
